<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
	<meta charset="UTF-8">
	<title>首页</title>
</head>


<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<!--页面主体-->
<div class="main-container" id="main-container" >
	<script type="text/javascript">
		try{ace.settings.check('main-container' , 'fixed')}catch(e){}
	</script>

	<!--侧边栏-->
	<div th:replace="_fragment :: menu(1,0)"></div>

	<!--主页中心部分-->
	<div class="main-content" >

		<!--面包屑-->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>

			<!--多级导航-->
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a th:href="@{/admin/toIndex}">首页</a>
				</li>
				<li class="active">展示</li>
			</ul><!-- /.breadcrumb -->
		</div>

		<!--中心内容	-->
		<div class="page-content">

			<div class="page-content-area">


				<div class="row">
					<div class="col-xs-12">
						<!-- 页面内容开始 -->
						<!--公告	-->
						<div class="alert alert-block alert-success">
							<button type="button" class="close" data-dismiss="alert">
								<i class="ace-icon fa fa-times"></i>
							</button>
							<i class="ace-icon fa fa-check green"></i>
							欢迎使用
							<strong class="green">
								书店后台管理
								<small>(v1.0)</small>
							</strong>,
							你本次登录时间为: <span th:text="${#dates.format(indexVo.date,'yyyy-MM-dd HH:mm:ss')}"></span>，登录IP: [[${indexVo.ip}]]
						</div>

						<div class="row">
							<div class="space-6"></div>

							<!--数据统计	-->
							<div class="infobox-container" style="width: 98%;margin: 0 auto;">
								<div class="infobox infobox-green">
									<div class="infobox-icon">
										<i class="ace-icon fa fa-eye"></i>
									</div>
									<div class="infobox-data">
										<div class="infobox-content">访问总数量</div>
									</div>
									<div class="infobox-data">
										<span class="infobox-data-number" th:text="${indexVo.views}">199</span>
									</div>
								</div>

								<div class="infobox infobox-blue">
									<div class="infobox-icon">
										<i class="ace-icon fa fa-myUser"></i>
									</div>

									<div class="infobox-data">
										<div class="infobox-content">用户总数量</div>
									</div>
									<div class="infobox-data">
										<span class="infobox-data-number" th:text="${indexVo.numbers}">99</span>
									</div>

								</div>

								<div class="infobox infobox-pink">
									<div class="infobox-icon">
										<i class="ace-icon fa fa-shopping-cart"></i>
									</div>
									<div class="infobox-data">
										<div class="infobox-content">订单总数量</div>
									</div>
									<div class="infobox-data">
										<span class="infobox-data-number" th:text="${indexVo.orderQuantity}">8</span>
									</div>
								</div>

								<div class="infobox infobox-orange2">
									<div class="infobox-chart">
										<span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"></span>
									</div>
									<div class="infobox-data">
										<div class="infobox-content">交易总金额</div>
									</div>
									<div class="infobox-data">
										<span class="infobox-data-number" th:text="${indexVo.totalPrice}">6,251</span>
									</div>
								</div>
							</div>

							<div class="vspace-12-sm"></div>
<!--							图表-->
							<div id="app" style="width: 98%;margin: 0 auto;margin-top: 27px;">
								<div class="header smaller lighter blue" style="margin: 10px auto"></div>
								<div height="10px" style="display: inline;font-size: 22px;font-weight: 400;">&nbsp;&nbsp;书本订单分类比率&nbsp;&nbsp;</div>
								<button @click="changeType" class="mdui-btn mdui-btn-raised">切换图表</button>
								<button @click="changeTime" id="time" class="mdui-btn mdui-btn-raised">切换时间</button>
								<ve-chart :data="chartData" :settings="chartSettings" :extend="chartExtendRound"></ve-chart>
							</div>

						</div><!-- /.row -->

						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content-area -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->

	<!--页脚	-->
	<div th:replace="_fragment::footer"></div>

	<!--回到顶部-->
	<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
		<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
	</a>
</div><!-- /.main-container -->

<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data() {
			this.typeArr = ['line', 'histogram', 'pie'],
					this.index = 0,
					this.time = 0
			return {
				chartData: {}, //柱状图数据
				chartExtendRound:{//柱状图颜色统一
					series:{
						itemStyle: {
							normal:{
								color:'#428bca'
							}
						}
					}
				},
                chartSettings : {
                    yAxisType: ['percent'],
                    yAxisName: ['比率'],
                    type: this.typeArr[this.index]
                }
			}
		},
        methods: {
            changeType: function () {
                this.index++
                if (this.index >= this.typeArr.length) { this.index = 0 }
                this.chartSettings = { type: this.typeArr[this.index] }
            },
			changeTime: function () {
            	this.time++
				if(this.time >= 3){this.time = 0}//年月日
				if(this.time == 0){
					axios.get("/admin/toTableYear").then(Response => {
						console.log(Response.data);
						console.log(Response.data.chartData);
						this.chartData = Response.data.chartData;
						$("#time").text("今年详情");
						console.log(this.chartData);
					})
				}else
				if(this.time == 1){
					axios.get("/admin/toTableMonth").then(Response => {
						console.log(Response.data);
						console.log(Response.data.chartData);
						this.chartData = Response.data.chartData;
						$("#time").text("本月详情");
						console.log(this.chartData);
					})
				}else
				if(this.time == 2){
					axios.get("/admin/toTableMonth").then(Response => {
						console.log(Response.data);
						console.log(Response.data.chartData);
						this.chartData = Response.data.chartData;
						$("#time").text("今日详情");
						console.log(this.chartData);
					})
				}
			}
        },
		created:function () {
			axios.get("/admin/toTableYear").then(Response => {
				console.log(Response.data);
				console.log(Response.data.chartData);
				this.chartData = Response.data.chartData;
				console.log(this.chartData);
			})
		}
	})
</script>
</body>
</html>
